<template>
    <div class="notice">
        <head-top></head-top>
        <div class="info">
            <div class="tablebox">
                <el-button class="buttonBox" size="small" @click="addNotice" type="primary">新增公告</el-button>
                <el-table border :data="netiveList" style="width: 100%">
                    <el-table-column type="index" width="50"></el-table-column>
                    <el-table-column prop="context" label="公告"></el-table-column>
                    <el-table-column label="操作" width="100">
                        <template slot-scope="scope">
                            <el-button @click="handleClick(scope.row)" type="text" size="small">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
        <el-dialog title="添加公告" :visible.sync="dialogVisible" width="60%">
            <el-form :model="shopForm" label-width="100px" :rules="rules" ref="shopForm">
                <el-form-item label="公告" prop="context">
                    <el-input v-model="shopForm.context"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveShopFn('shopForm')">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
import { noticeAdd, noticeQuery, noticeDelete } from "@/server/api";
import headTop from "@/components/headTop";
export default {
    name: "notice",
    components: {
        headTop
    },
    data() {
        return {
            netiveList: [],
            dialogVisible: false,
            shopForm: {},
            rules: {}
        };
    },
    created() {
        this.dataInit();
    },
    methods: {
        async dataInit() {
            console.log(2222);
            let res = await noticeQuery();
            this.netiveList = res;
        },
        addNotice() {
            this.shopForm.context = ''
            this.dialogVisible = true;
        },
        async saveShopFn() {
            try {
                let res = await noticeAdd({
                    context: this.shopForm.context
                });
                this.$message({
                    type: "success",
                    message: "添加成功!"
                });
                this.dataInit();
                this.dialogVisible = false
            } catch (error) {
                this.$message({
                    type: "error",
                    message: error
                });
            }
        },
        async handleClick(row) {
            try {
                let res = await noticeDelete({
                id: row.id
            });
                this.$message({
                    type: "success",
                    message: "删除成功!"
                });
            this.dataInit();
            } catch (error) {
                this.$message({
                    type: "error",
                    message: error
                });
            }
        }
    }
};
</script>
<style lang="less">
.notice {
    .info {
        padding: 30px 10px;
        .buttonBox {
            margin-bottom: 30px;
        }
    }
}
</style>



